import React, { Component } from 'react'
import { Form, Input, Select, Button, Table, Popconfirm } from 'antd';
import { SearchOutlined } from '@ant-design/icons';
import { getUserList } from '@/services/api.js';
import AddOrEdit from './components/addOrEdit'
const { Option } = Select;

export default class index extends Component {
  state = {
    dataSource: [],
    total: 0,
    page: 1,
    pageSize: 10,
    visible: false,
    isAdd: true
  }
  formRef = React.createRef()
  columns = [
    {
      title: '用户名',
      dataIndex: 'userName',
    },
    {
      title: '所属部门',
      dataIndex: 'deptName',
    },
    {
      title: '邮箱',
      dataIndex: 'email',
    },
    {
      title: '手机号',
      dataIndex: 'phone',
    },
    {
      title: '性别',
      dataIndex: 'sex',
    },
    {
      title: '状态',
      dataIndex: 'status',
      render: (text, record, index) => {
        return <Button type="primary" size="small" danger={text==='禁用' ? true : false}>{text}</Button>
      }
    },
    {
      title: '创建时间',
      dataIndex: 'createTime',
    },
    {
      title: '操作',
      width: 240,
      fixed: 'right',
      render: (text, record, index) => {
        return (
          <div>
            <Button type="link" onClick={() => {this.openModal(1, record)}}>修改</Button>
            <Popconfirm getPopupContainer={(trigger) => trigger.parentNode} title="确定要执行【删除】操作吗？" okText="确定" cancelText="取消" onCancel={() => {console.log('取消删除')}} onConfirm={() => {console.log('确定删除')}}>
              <Button type="link" onClick={(index) => {this.handleDel(index)}}>删除</Button>
            </Popconfirm>
          </div>
        )
      }
    },
  ]
  componentDidMount() {
    this.getUserList()
  }
  rowSelection = {
    onChange: (selectedRowKeys, selectedRows) => {
      console.log(`selectedRowKeys: ${selectedRowKeys}`, 'selectedRows: ', selectedRows);
    },
  }
  getUserList = async () => {
    let res = await getUserList(this.formRef.current.getFieldsValue())
    this.setState({
      dataSource: res.list,
      total: res.total,
      page: res.page
    })
  }
  handleReset = () => {
    this.formRef.current.resetFields()
    this.getUserList()
  }
  handleDel = (index) => {
    console.log('删除', index);
  }
  openModal = (type, item) => {
    this.setState({
      visible: true,
      isAdd: type ? false : true,
      item: item || null
    })
  }
  render() {
    return (
      <div>
        <Form 
          layout="inline"
          ref={this.formRef}
          className="table-search-form"
          >
          <Form.Item label="用户名" name="userName">
            <Input placeholder="请输入用户名" />
          </Form.Item>
          <Form.Item label="性别" name="sex">
            <Select style={{width: '100px'}}>
              <Option value="0">男</Option>
              <Option value="1">女</Option>
            </Select>
          </Form.Item>
          <Form.Item>
            <Button type="primary" icon={<SearchOutlined />} onClick={this.getUserList}>搜索</Button>
            <Button className="ml10" onClick={this.handleReset}>重置</Button>
          </Form.Item>
        </Form>
        <div className="addBtn">
          <Button type="primary" onClick={() => {this.openModal(0)}}>新增</Button>
        </div>
        <Table
          columns={this.columns}
          dataSource={this.state.dataSource}
          rowKey="id"
          rowSelection={this.rowSelection}
          className="table-wrap"
          pagination={{
            total: this.state.total,
            showTotal: (total) => `共${total}条`,
            position: ['bottomCenter'],
            showQuickJumper: true,
            hideOnSinglePage: true
          }}
        >
        </Table>
        {this.state.visible ? <AddOrEdit item={this.state.item} visible={this.state.visible} isAdd={this.state.isAdd} closeModal={() => {this.setState({visible: false})}}></AddOrEdit> : null}
        
      </div>
    )
  }
}
